<template>
  <view class="feedback-page">
    
    <!-- 页面头部 -->
    <view class="header">
      <view class="back-icon" @click="back">‹</view>
      <h2 class="title">反馈建议</h2>
    </view>
    
    <!-- 反馈表单区域 -->
    <view class="feedback-form">
      <!-- 反馈类型选择 -->
      <view class="form-section">
        <view class="section-title">请选择反馈类型*</view>
        <view class="radio-options">
		<radio-group class="radio-group"  @click="log" @change="radiochange($event)">
          <view class="radio-item">
			  <label class="radio">
			  	<radio value="1" /><text>垃圾广告</text>
			  </label>
          </view>
		  
          <view class="radio-item">
			<label class="radio">
				<radio value="2" /><text>有害信息</text>
			</label>
          </view>
		  
          <view class="radio-item">
           <label class="radio">
           	<radio value="3" /><text>涉嫌侵权</text>
           </label>
          </view>
		  </radio-group>
        </view>
      </view>
      
      <!-- 问题意见区域 -->
      <view class="form-section">
        <view class="section-title">问题和意见</view>
        <view class="textarea-container">
          <textarea placeholder="请描述你要反馈的问题，我们会尽快回复哦~" v-model="formdata.content"></textarea>
        </view>
    
      </view>
      
      <!-- 联系方式 -->
      <view class="form-section">
        <view class="section-title">联系方式</view>
        <view class="input-container">
          <input type="email" v-model="formdata.email" placeholder="请留下您的联系邮箱">
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-container">
      <button class="submit-button" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
	import myquest from "@/untils/request.js"
export default {
  name: 'feedback',
  data(){
	  return{
		  formdata:{
			  feedbackType:1,
			  content:"",
			  email:""
		  }
	  }
  },
  methods:{
	  back(){
	  		  uni.switchTab({
	  		  	url:"/pages/mine/mine"
	  		  })
	  },
	  log(){
		  console.log(this.formdata);
	  },
	  radiochange(e){
		  this.formdata.feedbackType = e.detail.value
	  },
	  cleardata(){
		  this.formdata.feedbackType = 1
		  this.formdata.content=""
		  this.formdata.email=""
	  }
	  ,
	  submit(){
		  if(!this.formdata.email || !this.formdata.content || !this.formdata.feedbackType ){
			  uni.showToast({
			  	title:"请填写完整",
				icon:'error'
			  })
			  return
		  }
		  uni.showLoading({
		  	mask:false
		  })
		  myquest.feedback(this.$store.state.token,this.formdata)
		  .then(res=>{
			  uni.hideLoading()
			  console.log(res);
			  if(res.data.code === 0){
			  	uni.showToast({
			  		title:"反馈成功",
			  		icon:"success"
			  	})
				this.cleardata()
			  }else{
			  	uni.showToast({
			  		title:"网络不佳，请稍后再试",
			  		icon:"error"
			  	})
			  }
		  }).catch(err=>{
			  uni.showToast({
			    	title:"网络不佳，请稍后再试",
			    	icon:"error"
			    })
			    uni.hideLoading()
			  console.log(err);
		  })
	  }
  }
}
</script>

<style scoped>
/* 整体样式 */
.feedback-page {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #333;
  padding: 0 20px;
  min-height: 100vh;
}

/* 状态栏 */
.status-bar {
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  padding: 20px 0;
  position: relative;
  border-bottom: 1px solid #eee;
}

.back-icon {
  font-size: 28px;
  position: absolute;
  font-weight: 300;
}

.title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  margin: 0;
}

/* 表单区域 */
.radio-group{
	display: flex;
	justify-content: space-around;
	gap: 10px;
}
.feedback-form {
  padding-top: 25px;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
}

/* 单选框样式 */
.radio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #dcdee0;
  margin-right: 8px;
  position: relative;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.radio-item input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background-color: #1a1a1a;
  border-radius: 50%;
}

.radio-item label {
  font-size: 15px;
  cursor: pointer;
}

/* 输入框和文本域样式 */
.textarea-container textarea {
  width: 100%;
  height: 120px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e5e5ea;
  resize: none;
  font-size: 15px;
  box-sizing: border-box;
}

.textarea-container textarea::placeholder {
  color: #999;
}

.input-container input {
  width: 100%;
  height: 25px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #e5e5ea;
  font-size: 15px;
  /* box-sizing: border-box; */
}

/* 附件样式 */
.attachment-container {
  margin-top: 10px;
  text-align: center;
}

.attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #f8f8f8;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 24px;
  color: #999;
  font-weight: 300;
  cursor: pointer;
}

/* 提交按钮样式 */
.submit-container {
  padding: 15px 0 30px;
}

.submit-button {
  width: 100%;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

/* 聚焦状态 */
textarea:focus,
input:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
</style>